<template>
  <div>
    <h1>App</h1>
    {{ username }} / {{ age }}
    <hr>
    {{ info }}
    <!-- <TsInfo :name="username" @update:name="username = $event" :age="age" @update:age="age = $event">
    </TsInfo> -->
    <!-- <TsInfo :name.sync="username" :age.sync="age"></TsInfo> -->
    <TsInfo v-bind.sync="info"></TsInfo>

  </div>
</template>
<script>
export default {
  data() {
    return {
      username: 'jack',
      age: 20,
      info: {
        name: 'jack',
        age: 20,
        // hobby: ['css', 'html'],
        // gender: 2,
        // city: 'nj'
      }
    };
  },
  methods: {
    say() {
      console.log('hello');
    }
  }
};
</script>

<style>
div {
  border: solid 1px;
  padding: 10px;
}
</style>